<template>
  <div>
    <div class="top">
        <div class="top2">
      <el-input
        v-model="input"
        placeholder="请输入设备编号或者场馆名称搜索"
        clearable
        @input="fin"
        class="input"
      ></el-input>
      <el-button type="success" @click="getCreditConfigurationDTO">搜索</el-button>
      </div>
      <el-button type="success" @click="show(0)">新增</el-button>
    </div>
    <Table :columns="columns1" :data="data1" border ></Table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
    >
      <span>确认删除?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeid">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增设备" :visible.sync="dialogVisible2" append-to-body :before-close="handleClose">
      <el-form label-width="80px">
        <el-form-item label="场馆名称">
            <el-select
        style="width: 100%"
        v-model="region"
       @change="select"
       value-key="id"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
        </el-form-item>
       
        <el-form-item label="设备编号">
          <el-input
            v-model="input2"
            placeholder="请输入设备编号"
            clearable
            class="input2"
          ></el-input>
          <el-button type="success" @click="newde">生成</el-button>
        </el-form-item>
        <el-form-item label="秘钥">
          <el-input
            v-model="input3"
            placeholder="请输入秘钥"
            clearable
            class="input2"
          ></el-input>
          <el-button type="success" @click="newde2">生成</el-button>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="input4"
            placeholder="请输入备注"
            clearable
            class="input2"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure">提 交</el-button>
      </div>
    </el-dialog>



   <el-dialog title="修改设备" :visible.sync="dialogVisible3" append-to-body :before-close="handleClose2">
      <el-form label-width="80px">
        <el-form-item label="场馆名称">
            {{name}}
     


     
            <el-select
        style="width: 400px"
        v-model="region"
       @change="select"
       value-key="id"
        filterable
        placeholder="请选择博物馆"
      >
        <el-option
          v-for="item in museumList"
          :key="item.id"
          :label="item.name"
          :value="item"
        >
        </el-option>
      </el-select>
   
        </el-form-item>
    
       
        <el-form-item label="设备编号">
          <el-input
            v-model="input2"
            placeholder="请输入设备编号"
            clearable
            class="input2"
          ></el-input>
          <el-button type="success" @click="newde">生成</el-button>
        </el-form-item>
        <el-form-item label="秘钥">
          <el-input
            v-model="input3"
            placeholder="请输入秘钥"
            clearable
            class="input2"
          ></el-input>
          <el-button type="success" @click="newde2">生成</el-button>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="input4"
            placeholder="请输入备注"
            clearable
            class="input2"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sure2">提 交</el-button>
      </div>
    </el-dialog>
<el-pagination
  background
  layout="total,prev, pager, next"
   @current-change="changecurrent"
  :total="total">
</el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
       dialogVisible3: false,
      input: "",
      input2: "",
      input3: "",
      input4: "",
      total:0,
      current:1,
      data1: [],
      name:'',
      region: "",
      columns1: [
        {
          title: "场馆名称",
          key: "museumName",
        },
        {
          title: "设备编号",
          key: "appKey",
        },
        {
          title: "秘钥",
          key: "appSecret",
        },
        {
          title: "添加时间",
          key: "gmtCreate",
        },
        {
          title: "备注",
          key: "remark",
        },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          minWidth: 150,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                  },
                  on: {
                    click: () => {
                      this.show(params);
                    },
                  },
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "warning",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      museumList: [],
    };
  },
  created() {
    this.getCreditConfigurationDTO();
  },
  methods: {
    getCreditConfigurationDTO() {
        console.log(this.input)
      
      this.$http(
        "/stage/deviceManage/getCreditConfigurationDTO",
        {
          current: this.current,
          name: this.input,
          orders: [
            {
              asc: true,
              column: "",
            },
          ],
          size: 10,
        },
        "post",
        (res) => {
          console.log(res.data.data.records);
          this.data1 = res.data.data.records;
          this.total = res.data.data.total
        }
      );
    },
    fin() {
      console.log(this.input);
    },
    show(index) {
      if (index == 0) {
        this.id = "";
          this.getAppMuseumDropDown();
      this.dialogVisible2 = true;
      } else if (index.row.id) {
        console.log(1);
        this.getAppMuseumDropDown();
        console.log(index)
        this.idd = index.row.id
        this.id = index.row.museumId;
        this.name = index.row.museumName;
        this.input2 = index.row.appKey;
        this.input3 = index.row.appSecret;
        this.input4 = index.row.remark
        this.dialogVisible3 = true;
      }
    
    },
    remove(index) {
      console.log(index);
      console.log(index.row.id);
      this.id = index.row.id;
      this.dialogVisible = true;
    },
    removeid() {
      this.$http(
        "/stage/deviceManage/deleteCreditConfiguration",
        {
          id: this.id,
        },
        "get",
        (res) => {
          if (res.data.code == 200) {
            this.$Message.success("删除成功");
            this.getCreditConfigurationDTO();
            this.dialogVisible = false;
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
    },
    getAppMuseumDropDown() {
      this.loading1 = true;
      this.$http("/stage/museum/getAppMuseumDropDown", {}, "post", (res) => {
        if (res.data.code == 200) {
          this.museumList = res.data.data;
          for (let i = 0; i < this.museumList.length; i++) {
            if (this.museumList[i].name.length > 20) {
              this.museumList[i].name =
                this.museumList[i].name.slice(0, 20) + "...";
            }
          }
          this.museumId = this.museumList[0].id;
          this.museumName = this.museumList[0].name;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    sure() {
      console.log(this.event, this.input2, this.input3, this.input4);
      if (!this.event || !this.input2 || !this.input3) {
        this.$Message.error("请提交完整设备信息");
        this.region = '';
        this.input2 = "";
        this.input3 = "";
        this.input4 = "";
        this.dialogVisible2 = false;
        return;
      }
      this.$http(
        "/stage/deviceManage/addCreditConfiguration",
        {
          appKey: this.input2,
          appSecret: this.input3,
          museumId: this.event.id,
          museumName: this.event.name,
          remark: this.input4,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            console.log(res);
            this.$Message.success("提交成功");
            this.getCreditConfigurationDTO()
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
      this.region = '';
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.dialogVisible2 = false;
    },
    sure2(){
          console.log( this.input2, this.input3, this.input4);
      if ( !this.input2 || !this.input3) {
        this.$Message.error("请提交完整设备信息");
        this.region = '';
        this.input2 = "";
        this.input3 = "";
        this.input4 = "";
        this.dialogVisible3 = false;
        return;
      }
      this.$http(
        "/stage/deviceManage/updateCreditConfiguration",
        {
            id:this.idd,
          appKey: this.input2,
          appSecret: this.input3,
          museumId: this.id,
          museumName: this.name,
          remark: this.input4,
        },
        "post",
        (res) => {
          if (res.data.code == 200) {
            console.log(res);
            this.$Message.success("提交成功");
            this.getCreditConfigurationDTO()
          } else {
            this.$Message.error(res.data.msg);
          }
        }
      );
      this.region = '';
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.dialogVisible3 = false;
    },
    handleClose(){ this.region = '';
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.dialogVisible2 = false;},
       handleClose2(){ this.region = '';
      this.input2 = "";
      this.input3 = "";
      this.input4 = "";
      this.dialogVisible3 = false;},
    select(event) {
      console.log(event);
      this.event = event;
      this.name = event.name;
      this.id = event.id
    },
    newde() {
      this.$http("/stage/deviceManage/getDeviceSerialNum", {}, "get", (res) => {
        if (res.data.code == 200) {
          this.input2 = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    newde2() {
      this.$http("/stage/deviceManage/getAppSecret", {}, "get", (res) => {
        if (res.data.code == 200) {
          this.input3 = res.data.data;
        } else {
          this.$Message.error(res.data.msg);
        }
      });
    },
    changecurrent(current){
        console.log(current)
        this.current= current
        this.getCreditConfigurationDTO()
    }
  },
};
</script>

<style scoped>
.top {
  display: flex;
  justify-content: space-between;
}
.input {
  width: 350px;
}
.input2 {
  width: 40%;
}
.el-pagination{
        display: flex;
    justify-content: right;
}
</style>